import React, { useState } from 'react';
import { ConnectionConfig } from '../types';

interface ConnectionFormProps {
  onConnect: (config: ConnectionConfig) => void;
  isConnecting: boolean;
  error?: string | null;
}

export function ConnectionForm({ onConnect, isConnecting, error }: ConnectionFormProps) {
  const [ticket, setTicket] = useState('');
  const [nickname, setNickname] = useState('riterm-client');
  const [secretKey, setSecretKey] = useState('');
  const [autoReconnect, setAutoReconnect] = useState(true);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (ticket.trim()) {
      onConnect({
        ticket: ticket.trim(),
        nickname: nickname.trim() || undefined,
        auto_reconnect: autoReconnect,
        secret_key: secretKey.trim() || undefined,
      });
    }
  };

  return (
    <div className="min-h-screen bg-gray-900 flex items-center justify-center p-4">
      <div className="bg-gray-800 rounded-lg shadow-xl p-6 w-full max-w-md">
        <div className="text-center mb-6">
          <h1 className="text-2xl font-bold text-white mb-2">Riterm</h1>
          <p className="text-gray-400 text-sm">Connect to remote CLI via iroh protocol</p>
        </div>

        {error && (
          <div className="mb-4 p-3 bg-red-900/50 border border-red-500 rounded-md">
            <div className="text-sm text-red-400">{error}</div>
          </div>
        )}

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label htmlFor="ticket" className="block text-sm font-medium text-gray-300 mb-1">
              Ticket *
            </label>
            <textarea
              id="ticket"
              value={ticket}
              onChange={(e) => setTicket(e.target.value)}
              placeholder="Paste the iroh ticket here..."
              className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
              rows={3}
              required
            />
          </div>

          <div>
            <label htmlFor="nickname" className="block text-sm font-medium text-gray-300 mb-1">
              Nickname
            </label>
            <input
              id="nickname"
              type="text"
              value={nickname}
              onChange={(e) => setNickname(e.target.value)}
              placeholder="Your display name"
              className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          <div>
            <label htmlFor="secretKey" className="block text-sm font-medium text-gray-300 mb-1">
              Secret Key (Optional)
            </label>
            <input
              id="secretKey"
              type="text"
              value={secretKey}
              onChange={(e) => setSecretKey(e.target.value)}
              placeholder="IROH_SECRET for persistent identity"
              className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm"
            />
            <p className="text-xs text-gray-500 mt-1">
              Leave empty for random identity
            </p>
          </div>

          <div className="flex items-center">
            <input
              id="autoReconnect"
              type="checkbox"
              checked={autoReconnect}
              onChange={(e) => setAutoReconnect(e.target.checked)}
              className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-600 rounded bg-gray-700"
            />
            <label htmlFor="autoReconnect" className="ml-2 text-sm text-gray-300">
              Auto-reconnect on connection loss
            </label>
          </div>

          <button
            type="submit"
            disabled={isConnecting || !ticket.trim()}
            className={`w-full font-medium py-2 px-4 rounded-md transition-colors ${
              isConnecting || !ticket.trim()
                ? 'bg-gray-600 text-gray-400 cursor-not-allowed'
                : 'bg-blue-600 hover:bg-blue-700 text-white'
            }`}
          >
            {isConnecting ? (
              <div className="flex items-center justify-center">
                <svg className="w-4 h-4 animate-spin mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
                Connecting...
              </div>
            ) : (
              'Connect'
            )}
          </button>
        </form>

        <div className="mt-6 pt-6 border-t border-gray-700">
          <h3 className="text-sm font-medium text-gray-300 mb-2">How to get a ticket:</h3>
          <ol className="text-xs text-gray-400 space-y-1 list-decimal list-inside">
            <li>Run the CLI server: <code className="bg-gray-700 px-1 rounded">cargo run --bin cli</code></li>
            <li>Copy the ticket from the terminal output</li>
            <li>Paste it in the field above and connect</li>
          </ol>
        </div>
      </div>
    </div>
  );
}